<template>
  <div class="container">
    <el-dialog
      :title="editId ? '编辑学科' : '新增学科 '"
      :visible.sync="dialogVisible"
      width="32%"
      :before-close="btnCancel"
    >
      <el-form
        ref="roleFormRef"
        :model="roleForm"
        :rules="roleRules"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科名称" prop="name">
          <el-input v-model="roleForm.name" />
        </el-form-item>
        <el-form-item>
          是否显示
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" align="middle" justify="center">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from "@/api/hmmm/subjects";
export default {
  data() {
    return {
      roleForm: {
        name: "",
      },
      roleRules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
      },
      value: true,
    };
  },
  methods: {
    async btnOk() {
      if (this.editId) {
        // 修改
        await update({
          id: parseInt(this.editId.id),
          subjectName: this.roleForm.name,
          isFrontDisplay: this.value,
        });
      } else {
        // 发起新增请求
        await add({
          subjectName: this.roleForm.name,
          isFrontDisplay: this.value,
        });
      }
      //   提示成功
      this.$message.success(this.editId ? "修改成功!" : "新增成功!");
      //   关闭对话框
      this.btnCancel();
      this.roleForm.name = "";
      this.value = true;
      // 重新渲染
      this.$emit("tlist");
    },
    btnCancel() {
      this.$emit("IfDialogVisible");
      this.roleForm.name = "";
      this.value = true;
    },
  },
  props: {
    dialogVisible: {
      type: Boolean,
      require: true,
    },
    editId: {
      type: Object,
    },
    list: {
      type: [String, Array],
      require: true,
    },
  },
};
</script>

<style scoped lang='scss'></style>
